<template>
	<view class="big swing ">
		<!--使用draggable组件-->
<!-- 		<draggable class="container" v-model="column" chosenClass="chosen" forceFallback="true" group="people"
			animation="1000" @start="onStart" @end="onEnd"> -->
			<!-- 判断是否是最后一个，不是就加上这个样式 test -->
			<view ref="shakeCard" :class="['swing’， item', {'test' : index % 2 == 0 && index != 0}, {'shake-card': animateFlag}, item.shake]" v-for="(item, index) in column" :key="index" @longpress="editCard" 
			:style="{backgroundColor: item.lightColor}" >
			<!-- <view ref="shakeCard" :class="['swing’， item', {'test' : index % 2 == 0 && index != 0}, {'shake-card': shakeFlag}, {item.shake: shakeFlag}]" v-for="(item, index) in column" :key="index" @longpress="editCard" 
			:style="{backgroundColor: item.bgcColor}" > -->
				<!-- 卡片标题 -->
				<view class="card-title">
					{{item.name}}
				</view>
				<!-- 外部容器 -->
				<view class="card-icon-container">
					<!-- 内圈 圆 -->
					<view class="card-icon-circular" :style="{backgroundColor: item.bgcColor}">
						<!-- 卡片图标 -->
						<view :class="['card-icon', 'iconfont', item.icon ]"></view>
						<!-- <view class="card-icon iconfont icon-qianbao" ></view> -->
					</view>
				</view>
				<view class="up-container">
					<!-- 卡片金额 -->
					<view class="card-money" v-if="!animateFlag">
						<!-- TODO 计算该分类下的所有的账单的钱 -->
						{{item.balance ? '¥ ' + item.balance : '¥ 0'}}
					</view>
					<view class="edit-container" v-if="animateFlag" @click="editCategory(item)">编辑</view>
				</view>
				<!-- <view class="card-progress-bar">
					<progress :percent="item.percentage" activeColor="#81c697" backgroundColor="#afdfe4" active stroke-width="4" />
				</view> -->
				<view class="cha-icon iconfont icon-chacha" v-if="showDelete" @click="deleteCategory(item, index)"></view>
			</view>
		<!-- </draggable> -->
	</view>
</template>
<script>
	//导入draggable组件
	// import draggable from 'vuedraggable'
	export default {
		//注册draggable组件
		components: {
			// draggable,
		},
		props: {
			column: {
				type: Array,
				//定义要被拖拽对象的数组
				default: () => []

			},
			showDelete: {
				type: Boolean,
				default: true
			},
			animateFlag: {
				type: Boolean,
				default: false
			}
		},
		name: 'card',
		data() {
			return {
				card: [],
				drag: false,
				shakeFlag: false,																			// 是否晃动
				test: 'move 3s infinite',																	// 晃动样式
				
			};
		},
		methods: {
			/** 编辑分类回调
			 * @param {Object} item 分类对象
			 */
			editCategory(item) {
				this.$emit("editCategory", item);
			},
			//开始拖拽事件
			onStart() {
				this.drag = true;
			},
			//拖拽结束事件
			onEnd() {
				this.drag = false;
			},
			// 长按事件
			editCard() {
				// console.log(this.$refs.shakeCard,"12321");
				// 修改晃动效果
				this.shakeFlag = !this.shakeFlag;
				// 调用父组件的需要长按时的触发事件
				this.$emit('exidCard')
			},
			/** 删除事件
			 * @param {Object} item 分类对象
			 * @param {Object} index 索引
			 */
			deleteCategory(item, index) {
				this.$emit('deleteCategory', item, index);
			}
		},
		mounted(){
			// for (var i = 0; i < 10; i++) {
			// 	this.column.push({people: 'cn', id: i + 1, name: i + 1 , money: '¥' + (i + 1) * 120, precent: i + 1 * 20})
			// }
		},
	};
</script>
<style scoped lang="scss">
	
	// .swing{
	// 	animation:move 1s 0s infinite;
	// 	-webkit-animation:move 1s 0s infinite;
	// 	transform-origin: center;
	// 	-webkit-transform-origin: center;
	// }
	
	// @keyframes move
	// {
	// 	0%, 25%, 50%, 75%, 100%{
	// 	  -webkit-transform:rotate(0deg);
	// 	  transform:rotate(0deg);
	// 	}
	// 	70% {  
	// 	  -webkit-transform:rotate(1deg);
	// 	  transform:rotate(1deg);
	// 	}
	// 	75% {  
	// 	  -webkit-transform:rotate(-1deg);
	// 	  transform:rotate(-1deg);
	// 	}
	// 	80% {  
	// 	  -webkit-transform:rotate(1deg);
	// 	  transform:rotate(1deg);
	// 	}
	// 	85% {  
	// 	  -webkit-transform:rotate(-1deg);
	// 	  transform:rotate(-1deg);
	// 	}
	// 	90% {  
	// 	  -webkit-transform:rotate(1deg);
	// 	  transform:rotate(1deg);
	// 	}
	// 	95% {  
	// 	  -webkit-transform:rotate(-1deg);
	// 	  transform:rotate(-1deg);
	// 	}
	// 	100% {  
	// 	  -webkit-transform:rotate(0deg);
	// 	  transform:rotate(0deg);
	// 	}
	// }
	
	uni-view {
		padding: 0rpx !important;
	}
	
	.big {
		// width: 100vw;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 35rpx;
	}

	/*被拖拽对象的样式*/
	.item {
		// padding: 6rpx;
		// border: solid 1px #eee;
		width: 100%;
		height: 270rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		// 阴影效果
		box-shadow: 0rpx 0rpx 6rpx #d4d3d3;
		text-align: center;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.cha-icon {
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			font-size: 40rpx;
			color: red;
		}
		// 标题
		.card-title {
			font-size: 30rpx;
			width: 100%;
			height: 60rpx;
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}
		
		// 图标容器
		.card-icon-container {
			width: 100%;
			height: 130rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.card-icon-circular {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		// 图标
		.card-icon {
			font-size: 45rpx;
			color: white;
		}
		
		.up-container {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		
			// 金钱
			.card-money {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 900;
				// margin-top: 10rpx;
				// margin-bottom: 3rpx;
				// margin-bottom: 10rpx;
			}
			
			.edit-container {
				width: 120rpx;
				height: 50rpx;
				background-color: $themeBgcLightGreyColor;
				border-radius: 50rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $themePurpleColor;
			}
		}
	}
	
	.delay1 {
		-webkit-animation: move 3s 0.1s infinite;
	}
	.delay2 {
		-webkit-animation: move 3s 0.3s infinite;
	}
	.delay3 {
		-webkit-animation: move 3s 0.5s infinite;
	}
	.delay4 {
		-webkit-animation: move 3s 0.9s infinite;
	}
	
	.shake-card {
		//animation-duration: 6s; //动画持续时间完成
		// animation-delay: 2s;  //动画延迟多久才开始
		//animation-iteration-count: infinite;  //是否循环执行动画
		animation-iteration-count: infinite;
		animation:move 3s 0.1s infinite;
		// -webkit-animation: move 3s 0.s infinite;
		transform-origin: center;
		-webkit-transform-origin: center;
	}
	
	// 动画 左右摇摆
	@keyframes move
	{
	  0%{
	    -webkit-transform:rotate(0deg);
	    transform:rotate(0deg);
	  }
	  10%{
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  15%{
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  20%{
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  25%{
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  30%{
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  35%{
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  40%{
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  45%{
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  50%{
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  55%{
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  60%{
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  65%{
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  70% {
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  75% {
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  80% {
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  85% {
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  90% {
	    -webkit-transform:rotate(2deg);
	    transform:rotate(-2deg);
	  }
	  95% {
	    -webkit-transform:rotate(-2deg);
	    transform:rotate(2deg);
	  }
	  100% {
	    -webkit-transform:rotate(0deg);
	    transform:rotate(0deg);
	  }
	}
	
	.test{
		margin-right: 0rpx;
	}
	
	// .item:last-child {
	// 	margin-right: 0px;
	// }
	
	// .item::first-child {
	// 	// margin-left: 0px;
	// }

	/*选中样式*/
	.chosen {
		border: solid 2px #3089dc !important;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
	}
</style>
